<template>
	<view class="certificate-list" :class="themeName">
		<!-- #ifndef H5 -->
		<navbar :title="config.list.list_title"></navbar>
		<!-- #endif -->

		<view class="certificate-item p-30">

			<view class="search-input m-b-20">
				<u-search class="flex-1" v-model="keyword" height="72" bg-color="#fff" :show-action="false"
					shape="square" :placeholder="search_placeholder" @search="handleSearch" @clear="handleSearch" />
			</view>

			<mescroll-uni ref="mescrollRef" :fixed="false" v-if="meskey" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: config.list.nodata,
				  	fixed: true
				  }
			  }" :down="{ 
				  auto: false,
				  textInOffset: config.list.textInOffset,
				  textOutOffset: config.list.textOutOffset,
				  textLoading: config.list.textLoading,
				  textSuccess: config.list.textSuccess,
				  textErr: config.list.textErr,
				}" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<block v-for="(item, idx) in certList" :key="idx">
					<view class="certificate p-20 m-b-20" @tap="toDetail(item.id)">
						<view class="certificate-header">
							<view class="title">{{config.cert.code_field}}</view>
							<view class="desc">{{item.sn}}</view>
						</view>

						<view class="certificate-main">
							<view class="line">
								<view class="title">{{config.cert.name_field}}：</view>
								<view class="desc">{{item.title}}</view>
							</view>
							<view class="line" v-if="config.certificate_type_show">
								<view class="title">{{config.cert.type_field}}：</view>
								<view class="desc">{{item.category_desc}}</view>
							</view>
						</view>
					</view>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>


<script>
	import {
		apiCertificateConfig,
		apiCertificateList
	} from '@/api/certificate'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'CertificateList',
		mixins: [MescrollMixin],

		data() {
			return {
				certList: [],
				config: {
					cert: {
						code_field: '证书编号',
						name_field: '证书名称',
						type_field: '证书类型',
					},
					list: {
						list_title: '证书列表',
						nodata: '暂无证书~',
						textInOffset: '下拉刷新',
						textOutOffset: '释放更新',
						textLoading: '加载中 ...',
						textSuccess: '加载成功',
						textErr: '加载失败',
					},
					query_data: {
						search_placeholder: '',
					},
					certificate_type_show: 1,
					query_enabled: 0
				},
				keyword: '',
				meskey: true
			}
		},

		computed: {
			search_placeholder() {
				var search_placeholder = this.config.query_data.search_placeholder == undefined || this.config.query_data
					.search_placeholder ==
					'' ?
					this.$zhTran('请输入{code}或{name}') : this.config.query_data.search_placeholder
				search_placeholder = search_placeholder.replace('{code}', this.config.cert.code_field)
				search_placeholder = search_placeholder.replace('{name}', this.config.cert.name_field)
				return search_placeholder
			},
		},

		methods: {
			handleSearch(value) {
				this.keyword = value
				this.refreshCertificateData();
			},

			refreshCertificateData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCertificateList({
					keyword: this.keyword,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.certList = []
					this.certList = [...this.certList, ...lists]
					this.certList = this.$zhTran(this.certList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			// 去订单详情
			toDetail(id) {

				if (!this.config.query_enabled) return

				this.$Router.push({
					path: '/bundle2/pages/certificate/detail',
					query: {
						cert_id: id
					}
				})
			},
			getConfig() {
				this.meskey = false
				return apiCertificateConfig().then((data) => {
					this.config = this.$zhTran(data)
					// #ifdef H5
					uni.setNavigationBarTitle({
						title: this.config.list.list_title,
					});
					// #endif
					return Promise.resolve(data);
				}).catch(err => {
					return Promise.reject(err);
				}).finally(() => {
					this.meskey = true
				});
			},
		},

		async onLoad() {
			const options = this.$Route.query
			this.keyword = options.keyword
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}

			await this.getConfig()
			this.refreshCertificateData()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.certificate-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.certificate-item {
			flex: 1;
			min-height: 0;
		}
	}

	.certificate {
		border-radius: 10px;
		background-color: #FFFFFF;

		&-header {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding-right: 20rpx;
			border-bottom: $-solid-border;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				margin-right: 26rpx;
			}

			.desc {
				font-size: 28rpx;
				color: rgba(128, 128, 128, 1);
			}
		}

		&-main {

			.line {

				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.title {
					font-size: 28rpx;
					color: rgba(56, 56, 56, 1);
				}

				.desc {
					font-size: 28rpx;
					color: rgba(64, 115, 250, 1);
				}
			}
		}
	}
</style>